<template>
	<view class="login">
		<Navigation />
		<view class="f fd-c ai-c mt-151">
			<view class="logo w-160 h-160 f jc-c ai-c">
				<image src="../../static/login/logo.png" class="w-130 h-130"></image>
			</view>
			<view class="fs-60 mt-40 fw-800 text-color1">输入验证码</view>
			<view class="mt-16 fs-24 text-color2">验证码已发送至 +86 {{ phoneNumbe(tel) }}</view>
			<view class="mt-64">
				<u-code-input v-model="code" :maxlength="4" :focus="true" fontSize="24" size="49" borderColor="#DDDDDD"
					color="#222222" @finish="finish" @change="getCodeData"></u-code-input>
			</view>
			<view class="fs-26 mt-40" :class="seconds > 0 ? 'text-color3' : 'text-color'" @click="getCode">{{ tips }}
			</view>
			
		</view>
		<view style="padding: 30rpx;margin-top: 40rpx;">
			<u-button text="下一步" color="#FABB3C" shape="circle" :disabled="disabled" @click="send"></u-button>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { phoneNumbe } from '@/utils/global';
	import { validateSmsCode, sendSmsCode, userIsNew } from '@/services/api/auth';
	import { useAuthStore } from '@/store/modules/auth';

	const authStore = useAuthStore();
	const code = ref(null);
	const tips = ref('');
	const seconds = ref(60);
	const isFalse=ref(true)
	let timer : any = null;
	const tel = ref(null);
	const disabled=ref(true)
	onMounted(() => {
		getTime();
	});
	onLoad((options : any) => {
		tel.value = options.tel;
		console.log(options);
	});
	async function finish() {
		disabled.value=false
		
		
	}
	async function send(){
		uni.setStorageSync('tel', tel.value)
		await validateSmsCode({ mobile: tel.value, code: code.value, scene: '1' });
		await authStore.login({ mobile: tel.value, code: code.value }, 2);
		await authStore.getUserInfos();
		uni.switchTab({
			url: '/pages/index/index',
		});
	}
	function getCodeData(e : any) {
		code.value = e;
	}
	function getTime() {
		timer = setInterval(() => {
			if (seconds.value > 1) {
				seconds.value--;
				tips.value = `再次发送${seconds.value}s`;
			} else {
				seconds.value = 0;
				tips.value = '发送验证码';
				clearInterval(timer);
			}
		}, 1000);
	}

	async function getCode() {
		await sendSmsCode({ mobile: tel.value, scene: 1 });
		seconds.value = 60;
		tips.value = `再次发送${seconds.value}s`;
		getTime();
	}
</script>
<style lang="scss" scoped>
	.login {
		background: #ffffff;

		.logo {
			background: #fabb3c;
			border-radius: 50%;
		}

		::v-deep .u-button__text {
			font-size: 36rpx !important;
			font-weight: 600 !important;
		}

		::v-deep .u-button {
			height: 96rpx !important;
		}

		.heng {
			background: #999999;
		}
	}
</style>